<template>
  <div class="app-container">
        <p>收卖数据报表</p>
        <div class="header ">
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                label-width="68px" class="">
                <el-form-item label="选择时间" prop="orderDate">
                    <el-date-picker v-model="queryParams.orderDate" @change="changeTime" type="daterange" align="right"
                        start-placeholder="开始日期" end-placeholder="结束日期" >
                    </el-date-picker>
                </el-form-item>

                <el-form-item>
                    <el-button size="mini" @click="resetQuery">重置</el-button>
                    <el-button type="primary" size="mini" @click="handleQuery">筛选</el-button>
                    <el-button type="primary" plain size="mini" @click="handleLoadNew"
                        >刷新</el-button>
                </el-form-item>
            </el-form>

        </div>
        <backDateOne></backDateOne>
        <saleNum></saleNum>
    </div>
</template>

<script>
import backDateOne from './components/backDateOne.vue'
import saleNum from './components/saleNum.vue'
    export default {
      components:{backDateOne,saleNum},
      data(){
        return{
          // 查询参数
          queryParams: {
            orderDate:[],
            },
           // 显示搜索条件
           showSearch: true,
        }
      },
      methods: {
         /** 搜索按钮操作 */
         handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        handleLoadNew(){

        },
        changeTime(value) {
            if (value && value.length === 2) {
                // value[0] 和 value[1] 分别是开始和结束日期的 Date 对象
                let startDate = this.formatDate(value[0]);
                let endDate = this.formatDate(value[1]);
                this.queryParams.startDate = startDate
                this.queryParams.endDate = endDate
                this.getList()
            }
        },
      },
    }
</script>

<style lang="scss" scoped>
.flex1{
  display: flex;
  align-items: center;
}
.app-container {
    >p {
        opacity: 1;
        margin: 0 0 0 20px;
        /** 文本1 */
        font-size: 18px;
        font-weight: 400;
        color: rgba(17, 38, 60, 1);
        border-left: 3px solid rgba(84, 91, 245, 1);
        padding-left: 10px;
        margin-bottom: 15px;
        margin-left: 0;
    }

    .header {

        .el-form {
            left: 224px;
            top: 104px;
            min-height: 55px;
            opacity: 1;
            border-radius: 10px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 20px 45px rgba(240, 237, 246, 0.5);
            margin-bottom: 15px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            padding: 0 20px;
            padding-top: 10px;
            padding-bottom: 5px;
            .el-form-item {
                margin-bottom: 10px;

                ::v-deep .el-form-item__label {
                    opacity: 1;
                    /** 文本1 */
                    font-size: 14px;
                    font-weight: 400;
                    letter-spacing: -0.07px;
                    line-height: 32px;
                    color: rgba(3, 2, 2, 1);
                    text-align: right;
                    vertical-align: middle;

                }

                ::v-deep .el-form-item__content {

                    .el-input {
                        width: 165px;

                        .el-input__inner {
                            width: 165px;
                            border: 1px solid rgba(127, 127, 213, 0.5);
                            border-radius: 10px;
                        }
                    }

                    .el-button {
                        height: 32px;
                        opacity: 1;
                        border-radius: 2px;
                        background: linear-gradient(268.09deg, rgba(96, 103, 250, 1) 0%, rgba(119, 153, 252, 1) 100%);
                        padding: 8px 18px;
                        color: #fff;
                        border: none;
                        margin-left: 25px;

                        &:hover {
                            border: none;
                            background: linear-gradient(268.09deg, rgb(69, 78, 255) 0%, rgb(88, 130, 255) 100%);

                        }

                        &:nth-child(1) {
                            width: 60px;
                            height: 32px;
                            opacity: 1;
                            border-radius: 2px;
                            background: rgba(242, 243, 245, 1);
                            color: rgba(0, 0, 0, 0.3);
                            padding: 8px 16px 8px 16px;

                            &:hover {
                                border: none;
                                background: rgb(228, 228, 228);

                            }
                        }


                    }
                }


            }
        }
    }
  }
</style>
